<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href="./../script/api.css" rel="stylesheet">
    <link href="./../script/mapService.css" rel="stylesheet">
    <script src="../../js_example/script/map.min.js"></script>
    <script src="../../js_example/script/demo.js"></script>
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body class="restdemo-page">
    <div class="operate-header-container">
        <div class="operate-header-panel">

            <div class="header-left-panel">
                <div class="header-label" style="width: 240px;"><span id="mapStyle"></span></div>
            </div>


            <div class="header-right-panel">
                <div>
                    <div class="control" id="zq" data-index="1">
                        <span class="tq control-wrap-span"></span>
                        <i id="zqLocalName"></i>
                        <em></em>
                    </div>
                    <div id="popup_main" class="popup_main">
                        <div class="title">城市列表</div>
                        <div class="content">
                            <div class="sel_city blueC">

                                <div class="content-hot-panel" id="centerCityItem">
                                    <div class="hot-list-box">
                                        <dl class="dl-horizontal hot-list-dl">
                                            <dd class="hot-list-dd" id="centerCity"></dd>
                                        </dl>
                                    </div>
                                </div>

                                <div id="selCityTop">
                                    <div class="sel-city-searchbar">
                                        <div class="btnbar">
                                            <span class="sel-city-btnl" id="sel-city-btnl">按省份</span>
                                            <span class="sel-city-btnr" id="sel-city-btnr">按城市</span>
                                        </div>
                                    </div>

                                    <div style="border-top:1px solid #CCC;padding-bottom:10px;"></div>
                                </div>
                                <div id="selCityPlaceListId" class="selCityPlaceList">
                                    <table id="proList" cellpadding="0" cellspacing="0">

                                    </table>
                                    <table id="cityList" cellpadding="0" cellspacing="0">

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="split-box">
                    <div class="split-line"></div>
                </div>


                <div class="parameter-info-box">
                    <div class="inner-item-box">
                        <div class="item-header">经度</div>
                        <div class="item-content item-content-normal">
                            <div class="item-div">
                                <input type="number" step="0.1" name="firstname" class="item-input" id="lon">
                            </div>
                        </div>
                    </div>
                    <div class="inner-item-box" style="margin-left: 16px;">
                        <div class="item-header">纬度</div>
                        <div class="item-content item-content-normal">
                            <div class="item-div">
                                <input type="number" step="0.1" name="firstname" class="item-input" id="lat">
                            </div>
                        </div>
                    </div>
                    <div class="inner-item-box" style="margin-left: 16px;">
                        <div class="item-header">缩放</div>
                        <div class="item-content item-content-normal">
                            <div class="item-div">
                                <input type="number" step="0.1" name="firstname" class="item-input" id="zoom">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="operate-view-map-container minemap-common-container">
        <div id="mapui"></div>
    </div>

    <script>
        // var ajax = new XMLHttpRequest();
        var amap = null;
        var that = this;
        var mapCss = document.getElementById("mapStyle");
        var lon = document.getElementById("lon");
        var lat = document.getElementById("lat");
        var zoom = document.getElementById("zoom");

        // ajax.overrideMimeType("application/json");
        // ajax.open("GET", "../../map_service_example/data/mapStyle.json", true);
        // ajax.onreadystatechange = function () {
        //     if (ajax.readyState === 4 && ajax.status == "200") {
        //         var data = JSON.parse(ajax.responseText);
        //         if (data) {
        //             console.log(data);
        //             showMap(data);
        //         }
        //     }
        // };
        // ajax.send(null);

        var styleData = mapStyle;
        var openAdapter2 = openAdapter;

        if (adapterStyleIDS && adapterStyleIDS.length > 0) {
            map.Config.adapterStyleIDS = adapterStyleIDS;
        }

        if (styleData) {
            console.log(styleData);
            showMap(styleData);
        }

        function showMap(datas) {
            var id = window.location.search.split("?")[1];
            datas.forEach(function (data) {
                if (data.id == id) {
                    showInputValue(data);
                    //init();
                    map.Config.openAdapter = openAdapter2;
                    map.Factory.create('mapui', {
                        style: data.style,
                        center: data.center,
                        zoom: data.zoom,
                        maxZoom: data.maxzoom, //地图最大级别
                        minZoom: data.minZoom, //地图最小级别
                        strategy: ['mapboxgl', 'openlayers', 'leaflet'],
                        fullExtent: {
                            xmin: 108.23365,
                            ymin: 17.95253,
                            xmax: 111.78395,
                            ymax: 20.13104
                        }
                    }, function (o) {
                        amap = o;
                        reverseGeoCodeSearch()
                        that.addControl();
                        that.addEvent();
                    });
                }
            });
        }

        function showInputValue(data) {
            // 初始化表单值
            mapCss.innerText = data.mapType + "地图   " + data.mapStyle
            lon.value = data.center[0];
            lat.value = data.center[1];
            zoom.value = data.zoom;
        }

        function addControl() {
            amap.addControl('Navigation', { position: 'bottom-right' });
            amap.addControl('Scale', { maxWidth: 80, unit: 'metric' });
            amap.addControl('FullScreen', { position: 'bottom-right' });
            // amap.addControl('MiniMap', { position: 'bottom-left' });
            amap.addControl('Geolocate', { position: 'bottom-right' });
        }

        function addEvent() {
            function keydown(event) {
                if (event.keyCode == 13) {
                    amap.zoomToPoint(lon.value, lat.value);
                }
            }

            // 添加键盘按下事件
            lon.addEventListener('keydown', keydown);

            lat.addEventListener('keydown', keydown);

            zoom.addEventListener('keydown', function (event) {
                if (event.keyCode == 13) {
                    amap.pmap.setZoom(zoom.value);
                }
            });

            //地图缩放事件
            amap.on('zoomend', function () {
                zoom.value = amap.getZoom();
            });

            // 地图结束移动
            amap.on('moveend', function () {
                lon.value = amap.getCenter()[0];
                lat.value = amap.getCenter()[1];
                reverseGeoCodeSearch()
            });

        }

    </script>
    <script src="./../script/mapService.js"></script>
</body>

</html>